<template>
  <view class="container">
    <my-navbar-top></my-navbar-top>

    <view class="search-container">
      <!-- 搜索输入框 -->
      <view class="search-input-container">
        <view class="search-input">
          <view class="search-input-icon">
            <image src="/static/images/search.png" mode="widthFix"></image>
          </view>
          <input v-model="searchValue" style="flex: 1; margin-left: 10rpx; margin-right: 10rpx" type="text"
            placeholder="请输入关键词" placeholder-style="color: #999;font-size: 24rpx" />
          <view class="search-input-close" v-if="searchValue" @click="handleClear">
            <image src="/static/images/clear.png" mode="widthFix"></image>
          </view>
        </view>
        <!-- 搜索按钮 -->
        <view class="search-button" @click="handleSearch">搜索</view>
      </view>
      <!-- 筛选条件 -->
      <filter-com v-show="isSearch" :total="searchList.length" @type="handleType" @price="handlePrice"
        @filter="handleFilter"></filter-com>
      <!-- 分割线 -->
      <view v-if="!isSearch" class="search-line"></view>
      <view style="flex: 1; overflow-y: auto; padding: 0 35rpx">
        <!-- 搜索推荐 + 搜索历史 -->
        <view class="search-recommend" v-if="!isSearch">
          <view class="search-recommend-title">热门搜索</view>
          <view class="search-recommend-list">
            <view class="search-recommend-item" v-for="item in hotList" :key="item.id" @click="handleHotSearch(item)">
              {{ item.search_name }}
            </view>
          </view>
          <view class="search-line"></view>

          <view class="search-recommend-title" v-if="searchHistory.length !== 0">
            <view>历史搜索</view>
            <view class="search-recommend-del">
              <image src="/static/images/del.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="search-recommend-list">
            <view class="search-recommend-item" v-for="item in searchHistory" :key="item.id"
              @click="handleHistorySearch(item)">
              {{ item.name }}
            </view>
          </view>
        </view>
        <view v-else style="flex: 1">
          <view v-if="isSearch" style="height: 100%; overflow-y: auto">
            <view class="search-list">
              <goods-list :list="searchList" :isLoad="isLoad"></goods-list>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import FilterCom from '@/components/filterCom.vue'

import GoodsList from '@/components/goods/list.vue'
export default {
  name: 'Search',
  components: {
    FilterCom,
    GoodsList,
  },
  data() {
    return {
      isLoad: true, // 是否加载
      hotList: [],
      searchHistory: [],
      isSearch: false, // 是否搜索
      searchList: [],
      searchValue: '',
      page: 1,
      isEnd: false,
      total: 0,
      product_type_one_id: '', // 分类id
      category_id: '', // 分类id
      searchValue: '', // 搜索关键词
      goodsList: [],
      price_top: '', // 价格上限
      price_bottom: '', // 价格下限
      page: 1,
      isEnd: false,
      type: 'all',
      price: '',
      searchHistory: [], // 搜索历史
      filter: [],
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.$api.getHotSearch().then((res) => {
        this.hotList = res.data.hot_search || []
      })
      this.$api.getHistorySearch().then((res) => {
        this.searchHistory = res.data.history_search || []
      })
    },
    // 筛选条件
    handleType(type) {
      console.log('type', type)
      this.type = type
      this.price = ''
      this.getGoodsList(true)
    },
    // 价格
    handlePrice(price) {
      console.log('price', price)
      this.price = price
      this.type = ''
      this.getGoodsList(true)
    },
    // 筛选
    handleFilter(filter) {
      console.log('filter', filter)
      this.filter = JSON.stringify(filter.selectedFilters)
      this.price_top = filter.price_top
      this.price_bottom = filter.price_bottom
      this.product_type_one_id = filter.product_type_one_id
      this.getGoodsList(true)
    },
    // 搜索商品
    handleSearch() {
      if (!this.searchValue) return
      this.getGoodsList(true)
    },
    // 热门搜索
    handleHotSearch(item) {
      let obj = {
        name: item.product_type_keywords,
        val: [item.search_val],
        type: item.type
      }
      this.filter = JSON.stringify([obj])
      this.getGoodsList(true)
    },
    // 历史搜索
    handleHistorySearch(item) {
      this.searchValue = item.name
      this.getGoodsList(true)
    },
    // 获取商品 通用函数
    getGoodsList(init = false) {
      this.$util.showLoading()
      if (init) {
        this.page = 1
        this.isEnd = false
        this.searchList = []
      }
      this.isLoad = true
      this.isSearch = true
      let o = {
        page: this.page,
        search: this.searchValue,
        type: this.type,
        is_price: this.price,
        price_top: this.price_top,
        price_bottom: this.price_bottom,
        filter: this.filter,
        product_type_one_id: this.product_type_one_id || '',
        category_id: '',
      }
      this.$api.getGoodList(o).then((res) => {
        if (res.code == 0) {
          // 搜索
          console.log(res, 'res-搜索')
          this.isSearch = true
          let list = res.data || []
          this.isEnd = list.length === 0

          this.searchList = this.searchList.concat(list)
          this.total = res.count || 0
        }
        uni.hideLoading()
        this.isLoad = false
      })
    },
    // 清空搜索
    handleClear() {
      this.searchValue = ''
      this.isSearch = false
      this.searchList = []
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
